<template>
	<view style="width: 100%;padding: 20px;">
		<u--form labelPosition="left" :model="address" :rules="rules" ref="formRef">
			<u-form-item :labelWidth="75" label="收货人" prop="receiver" borderBottom ref="receiver">
				<u--input v-model="address.receiver" border="none"></u--input>
			</u-form-item>
			<u-form-item :labelWidth="75" label="手机号" prop="phone" borderBottom ref="phone">
				<u--input type="number" v-model="address.phone" border="none"></u--input>
			</u-form-item>
			<u-form-item :labelWidth="75" label="省市地区" prop="region" borderBottom ref="region">
				<u--input v-model="address.region" border="none"></u--input>
			</u-form-item>
			<u-form-item :labelWidth="70" label="详细地址" prop="detail" ref="detail">
				<u--textarea v-model="address.detail" placeholder="门牌/街道" count></u--textarea>
			</u-form-item>

			<view style="display: flex; justify-content: space-between;margin-top: 15px;">
				<text>默认地址</text>
				<u-switch v-model="status" activeColor="#5ac725"></u-switch>
			</view>

			<view style="margin-top: 50px;">
				<view>
					<u-button type="primary" @click="doSubmit" text="提交"></u-button>
				</view>
				<view style="margin-top: 20px;">
					<u-button type="error" @click="doReset" text="重置"></u-button>
				</view>
			</view>
		</u--form>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getUserInfo
	} from "@/stores/index.js";
	import {
		updateAddress,
		echo
	} from "@/api/address/index.js";
	import {onLoad} from "@dcloudio/uni-app";
	
	const id = ref(null);
	const address = ref({
		id: null,
		userId: null,
		receiver: '',
		phone: '',
		region: '',
		detail: '',
		status: 0
	});
	const user = getUserInfo();
	const status = ref(false);
	onLoad((options) => {
		id.value = options.id;
		echo(id.value).then((res) => {
			if(res.code === 200){
				address.value = res.data;
				if(address.value.status === 1){
					status.value = true;
				}
			}
		})
	})

	const formRef = ref();
	//校验
	const rules = ref({
		'receiver': {
			type: 'string',
			required: true,
			message: '请填写收货人姓名',
			trigger: ['blur','change'],
		},
		'phone': {
			type: 'string',
			max: 11,
			min: 11,
			required: true,
			message: '请填写手机号',
			trigger: ['blur','change'],
		},
		'region': {
			type: 'string',
			required: true,
			message: '请填写省/市地区',
			trigger: ['blur','change'],
		},
		'detail': {
			type: 'string',
			required: true,
			message: '请填写收货详细地址',
			trigger: ['blur','change'],
		}
	})

	//保存收货地址
	const doSubmit = () => {
		address.value.userId = user.id;
		address.value.id = id.value;
		formRef.value.validate().then((valid) => {
			if(status.value){
				address.value.status = 1
			}else{
				address.value.status = 0;
			}
			updateAddress(address.value).then((res) => {
				if(res.code === 200){
					uni.showToast({
						title: "修改成功！"
					})
					address.value = {};
					status.value = false;
					setTimeout(() => {
						uni.navigateBack({
							url: "/pages/address/address"
						})
					},1000)
				}
			})
		}).catch(err => {
			console.log(err, '校验失败');
		})
	}
	
	//重置方法
	const doReset = () => {
		address.value = {};
		status.value = false;
	}
</script>

<style lang="scss" scoped>

</style>